<template>
  <view class="auth-page">
    <!-- 医院选择 -->
    <view class="form-group">
      <text class="label bold">医院选择</text>
      <picker :range="hospitalList" @change="onHospitalChange">
        <view class="input-row picker-row">
          <text class="input-text">{{ selectedHospital || "请选择医院" }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 科室选择 -->
    <view class="form-group">
      <text class="label bold">科室选择</text>
      <picker :range="departmentList" @change="onDepartmentChange">
        <view class="input-row picker-row">
          <text class="input-text">{{
            selectedDepartment || "请选择科室"
          }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 职称级别 -->
    <view class="form-group">
      <text class="label bold">职称级别</text>
      <picker :range="titleList" @change="onTitleChange">
        <view class="input-row picker-row">
          <text class="input-text">{{ selectedTitle || "请选择职称" }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 性别选择 -->
    <view class="form-group">
      <text class="label bold">性别</text>
      <picker :range="genderList" @change="onGenderChange">
        <view class="input-row picker-row">
          <text class="input-text">{{ selectedGender || "请选择性别" }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 擅长领域 -->
    <view class="form-group">
      <text class="label bold">擅长领域</text>
      <textarea
        class="textarea"
        placeholder="请输入您擅长的领域"
        v-model="goodAt"
      />
    </view>

    <!-- 姓名 -->
    <view class="form-group">
      <text class="label bold">姓名</text>
      <input
        class="input"
        placeholder="请输入姓名"
        v-model="name"
        maxlength="20"
      />
    </view>

    <!-- 居民身份证 -->
    <view class="form-group">
      <text class="label bold">居民身份证</text>
      <input
        class="input"
        placeholder="请输入身份证号"
        v-model="idCard"
        maxlength="18"
      />
    </view>

    <!-- 申请认证按钮 -->
    <view class="btn-wrap">
      <button class="submit-btn" @click="onSubmit">申请认证</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { doctor } from "@/https/doctor";
import { getYyghDoctorData } from "@/https/HomeHTTP";
import type { DoctorItem } from "@/types/doctor";
import type { YyghDoctorDataItemResult } from "@/types/home";

const hospitalList = ref<string[]>([]);
const hospitalData = ref<YyghDoctorDataItemResult[]>([]);
const departmentList = ["内科", "外科", "儿科", "骨科"];
const titleList = ["主任医师", "副主任医师", "主治医师", "医师"];
const genderList = ["男", "女"];

const selectedHospital = ref("");
const selectedDepartment = ref("");
const selectedTitle = ref("");
const selectedGender = ref("");
const goodAt = ref("");
const name = ref("");
const idCard = ref("");

// 获取医院列表
const getHospitalList = async () => {
  try {
    const res = await getYyghDoctorData();
    hospitalData.value = res.data.result;
    hospitalList.value = hospitalData.value.map(
      (hospital: YyghDoctorDataItemResult) => hospital.title
    );
  } catch (error) {
    console.error("获取医院列表失败:", error);
    uni.showToast({ title: "获取医院列表失败", icon: "none" });
  }
};

// 页面加载时获取医院列表
onMounted(() => {
  getHospitalList();
});

const onBack = () => {
  uni.navigateBack();
};
const onHospitalChange = (e: any) => {
  selectedHospital.value = hospitalList.value[e.detail.value as number];
};
const onDepartmentChange = (e: any) => {
  selectedDepartment.value = departmentList[e.detail.value];
};
const onTitleChange = (e: any) => {
  selectedTitle.value = titleList[e.detail.value];
};
const onGenderChange = (e: any) => {
  selectedGender.value = genderList[e.detail.value];
};

const onSubmit = async () => {
  if (!selectedHospital.value) {
    uni.showToast({ title: '请选择医院', icon: 'none' })
    return;
  }
  if (!selectedDepartment.value) {
    uni.showToast({ title: '请选择科室', icon: 'none' })
    return;
  }
  if (!selectedTitle.value) {
    uni.showToast({ title: '请选择职称', icon: 'none' })
    return;
  }
  if (!selectedGender.value) {
    uni.showToast({ title: '请选择性别', icon: 'none' })
    return;
  }
  if (!goodAt.value.trim()) {
    uni.showToast({ title: '请输入擅长领域', icon: 'none' })
    return;
  }
  if (!name.value.trim()) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return;
  }
  if (!idCard.value.trim()) {
    uni.showToast({ title: '请输入身份证号', icon: 'none' })
    return;
  }

  // 根据选择的医院名称获取对应的hid
  const selectedHospitalData = hospitalData.value.find(
    (hospital: YyghDoctorDataItemResult) => hospital.title === selectedHospital.value,
  );

  if (!selectedHospitalData) {
    uni.showToast({ title: '医院信息获取失败', icon: 'none' })
    return;
  }

  const params: DoctorItem = {
    name: name.value,
    grade: selectedTitle.value,
    good_at: selectedDepartment.value,
    descs: goodAt.value,
    avatar: goodAt.value,
    gender: selectedGender.value === '男' ? '1' : '0', // 1表示男，0表示女
    depa: selectedHospital.value,
    did: '0',
    hid: selectedHospitalData.hid.toString(),
  };
  try {
    const res = await doctor(params);
    console.log(res);
    //接口请求成功 跳转到 profile 页面
    uni.showToast({ title: '认证成功', icon: 'none' })
    setTimeout(() => {
      uni.navigateTo({ url: '/pages/profile/profile' })
    }, 1000);
  } catch (err) {
    console.log(err);
    uni.showToast({ title: '认证失败', icon: 'none' })
  }
};
</script>

<style scoped>
.auth-page {
  background: #fff;
  min-height: 100vh;
  padding: 0 0 40rpx 0;
}
.header {
  display: flex;
  align-items: center;
  height: 100rpx;
  background: #fff;
  box-shadow: 0 8rpx 24rpx rgba(25, 195, 60, 0.08);
  padding: 0 32rpx;
  position: relative;
}
.back {
  font-size: 48rpx;
  color: #19c37c;
  font-weight: bold;
  margin-right: 24rpx;
  cursor: pointer;
}
.title {
  font-size: 36rpx;
  color: #19c37c;
  font-weight: bold;
}
.form-group {
  margin: 0 32rpx 0 32rpx;
  border-bottom: 2rpx solid #19c37c;
  padding: 32rpx 0 0 0;
}
.label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}
.input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 0 16rpx 0;
}
.input-text {
  font-size: 28rpx;
  color: #888;
}
.icon {
  font-size: 40rpx;
  color: #19c37c;
}
.textarea {
  width: 100%;
  min-height: 80rpx;
  border: 2rpx solid #19c37c;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin: 16rpx 0 0 0;
  color: #666;
  background: #fff;
  box-sizing: border-box;
}
.input {
  width: 100%;
  border: none;
  background: none;
  font-size: 28rpx;
  color: #333;
  margin: 8rpx 0 0 0;
}
.btn-wrap {
  margin: 64rpx 32rpx 0 32rpx;
}
.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #19c37c;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(25, 195, 60, 0.18);
  border: none;
}
.picker-row {
  cursor: pointer;
}
</style>
